import { BasicIcon } from '..'
import BaseDialog from './BasicDialog.vue'

function BasicMessageBox() {
  const { state } = useMessageBox()
  return (
    <BaseDialog
      visible={state.visible}
      title={state.title}
      type={state.type}
      confirmText={state.confirmText}
      cancelText={state.cancelText}
      showCancelButton={state.showCancelButton}
      isScroll={state.isScroll}
      width={400}
      showWarningIcon={state.showWarningIcon}
      showConfirmIcon={state.showConfirmIcon}
      confirmIcon={state.confirmIcon}
      closeOnModal={state.closeOnModal}
      closeOnEscape={state.closeOnEscape}
      loading={state.loading}
      confirm={state.confirm}
      onUpdate:visible={(val: boolean) => (state.visible = val)}
      onCancel={state.cancel}
    >
      <div class="message-wrap flex items-start">
        {state.showWarningIcon ? (
          <BasicIcon
            class="mr-[8px] mt-0.5 min-w-[16px]"
            name="error-circle-filled"
            color="#ff5d05"
            size="16px"
          ></BasicIcon>
        ) : (
          ''
        )}
        <div class="content text-[12px] leading-[22px] w-full">
          {state.content}
        </div>
      </div>
    </BaseDialog>
  )
}

export default BasicMessageBox
